<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        canvas {
            border-style: solid;
            border-color: black;
            border-width: 1px;
            border-radius: 1px;
        }

        canvas:focus {
            border-width: 3px;
            border-radius: 1px;
        }

        #editor {
            width: 800px;
            height: 600px;
            border-style: solid;
            border-color: black;
            border-width: 1px;
            border-radius: 1px;
        }

        #main {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        #panel {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }

        #ui {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }

        .space50 {
            width: 50px;
        }

        button {
            width: 100px;
            height: 30px;
            border-style: none;
            background: none;
            box-shadow: 2px 2px 5px #AAAAAA;
        }

        button:hover {
            background: #EEEEEE;
        }

        button:active {
            background: #777777;
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="panel">
            <div id="intro">
                拖动组件完成流程图，让角色到达终点。
            </div>
            <button id="run_btn">运行</button>
            <button id="reset_btn">新的一关</button>
        </div>
        <div id="ui">
            <canvas width="800" height="600" id="game" tabindex="0"></canvas>
            <canvas width="800" height="600" id="solver" tabindex="0"></canvas>
            <div id="editor" hidden="hidden"></div>
        </div>
    </div>

    <script src="index.js" type="module"></script>
    <script src="lib/ace/ace.js"></script>
    <script src="lib/ace/mode-javascript.js"></script>
    <script>
        var editor = ace.edit("editor");
        editor.session.setMode(new(ace.require("ace/mode/javascript").Mode)());
        editor.session.setValue(window.localStorage.getItem("code") ?? "debug.log(\"Hello, World!\")");
        window.getCode = () => {
            return editor.getValue();
        };
    </script>
</body>

</html>